import React from 'react';
import { Flex, WingBlank } from 'antd-mobile';
import MyIcon from './MyIcon';
import moment from 'moment';
import _ from 'lodash';

// 属性定义
// columns - 对象数组
// title 标题
// key 当前列key值
// sort: 1, -1, false；多个为1或-1的sort字段，只有第一个生效
// style: 列样式
// [
//   {title: 'head1', sort: false, style={flex: 1}},
//   {title: 'head2', key: 'key2', style={flex: 1}},
//   {title: 'head3', key: 'key3', sort: -1, style={flex: 1}},
// ]

// 可以排序的列表头
class SortableListHead extends React.Component {

  constructor(props) {
    super(props);
    let sortColumnIndex = -1, sortDirection = 0;
    const disableColumns = [];
    if (props.columns && props.columns.length) {
      _.forEach(props.columns, (column, index) => {
        if (column.sort === false) {
          disableColumns.push(index);
        } else if (column.sort !== undefined) {
          sortColumnIndex = index;
          sortDirection = (column.sort === -1) ? -1 : 1;
          return false;
        }
      });
    }
    this.state = {
      disableColumns,
      sortColumnIndex, // 排序列，默认无（-1）
      sortDirection, // 升降序，1或-1，默认无（0）
    };
  }

  onColumnClick = (index) => {
    if (_.indexOf(this.state.disableColumns, index) > -1) {
      return;
    }

    const oldDirection = this.state.sortDirection;
    const oldIndex = this.state.sortColumnIndex;
    let sortDirection = this.props.defaultSort;
    if (index === oldIndex) {
      if (oldDirection === 0 || oldDirection === -1) {
        sortDirection = 1;
      } else if (oldDirection === 1) {
        sortDirection = -1;
      }
    }
    this.setState({
      sortColumnIndex: index,
      sortDirection,
    });
    if (this.props.onSortChange) {
      this.props.onSortChange({
        key: this.props.columns[index].key,
        sort: sortDirection,
        index,
      });
    }
  };

  render() {
    const { columns } = this.props;
    if (!columns || !columns.length) {
      return;
    }

    const renderIcon = () => {
      let result = <MyIcon size="xxs" type="arrow-up" />;
      if (this.state.sortDirection === -1) {
        result = <MyIcon size="xxs" type="arrow-down" />;
      }
      return result;
    };

    const genIconStyle = (index) => {
      const result = {paddingLeft: 3, position: 'relative', top: 2}
      if (index !== this.state.sortColumnIndex) {
        result.visibility = 'hidden';
      }
      if (_.indexOf(this.state.disableColumns, index) > -1) {
        result.visibility = 'hidden';
      }
      return result;
    };

    return (
      <div className={this.props.className}>
        <Flex align="baseline">
        {
          columns.map((column, index) => {
            return (
              <span onClick={() => this.onColumnClick(index)} style={{ textAlign: 'center', flex: 1, ...column.style }} key={column.title}>
                {column.title}
                <span style={genIconStyle(index)} >
                {
                  renderIcon(index)
                }
                </span>
              </span>
            );
          })
        }
        </Flex>
      </div>);
  }
}

SortableListHead.propTypes = {
  defaultSort: React.PropTypes.oneOf([1, -1]),
  columns: React.PropTypes.array.isRequired,
  onSortChange: React.PropTypes.func,
};

SortableListHead.defaultProps = {
  defaultSort: 1,
};

export default SortableListHead;
